import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { asyncUpdaTodo } from "../../../app/slice/todoSlice";
// import store from "../../../app/store";
import './TodoMain.css';
export default function TodoMain() {

  let dispatch=useDispatch()
  let todo=useSelector(state=>state.todo)

  return (
    <ul className="todo-main">
      {
        todo.map(item=>{
          // console.log(item);
          return <li key={item._id}>
                  <label >
                    <input type="checkbox" checked={item.done} onChange={(e)=>{
                      dispatch(asyncUpdaTodo(item._id,e.target.checked))
                    }} />
                    <span>{item.title}</span>
                  </label>
                  <button className="btn btn-danger">删除</button>
                </li>
        })
      }
    </ul>
  );
}
